<template>
  <div>
    <audio :id="'audio_' + id">
      <source :src="url" />
      Your browser does not support this audio format.
    </audio>
    <mu-flex class="audio-detail" align-items="center">
      <mu-icon
        class="play-icon"
        size="50"
        v-show="!play"
        @click="playAudio"
        value="play_circle_outline"
      ></mu-icon>
      <mu-icon
        class="play-icon"
        v-show="play"
        @click="pauseAudio"
        size="50"
        value="pause_circle_outline"
      ></mu-icon>
      <div>
        <div class="content">{{ username }}的音频</div>
        <mu-flex
          class="progress"
          justify-content="between"
          align-items="center"
        >
          <div>{{ audioCurrentTime }}</div>
          <div class="progress-main">
            <div
              :style="{ width: audioCurrentLength + '%' }"
              class="progress-now"
            ></div>
            <div
              :style="{ left: audioCurrentLength + '%' }"
              class="progress-point"
            ></div>
          </div>
          <div>{{ transTime(audioDuration) }}</div>
        </mu-flex>
      </div>
    </mu-flex>
  </div>
</template>
<script>
export default {
  props: ["url", "id", "username"],
  data() {
    return {
      play: false,
      audio: { currentTime: 0, duration: 0 },
      playData: { currentTime: 0, duration: 0 },
      audioDuration: this.transTime("00:00"),
      playInterval: null,
      startX: 0,
    };
  },
  watch: {
    id: {
      immediate: true,
      handler(newVal, oldVal) {
        this.$nextTick(() => {
          this.audio = document.getElementById("audio_" + newVal);
          this.audio.src = this.url;
          this.audio.load();
          this.audio.oncanplay = () => {
            this.audioDuration = this.audio.duration;
          };
        });
      },
    },
  },
  methods: {
    playAudio() {
      if (this.audio.duration) {
        this.audio.play();
        this.play = true;
        this.playInterval = setInterval(() => {
          this.playData.duration = this.audio.duration;
          this.playData.currentTime = this.audio.currentTime;
        }, 1000);
      }
      this.inId = "test";
    },
    // dragStart(e) {
    //   this.startX = e.clientX;
    //   console.log(e.clientX);
    // },
    // drag(e) {
    //   let moveVal = e.clientX - this.startX;
    //   let moveValAbs = Math.abs(moveVal);
    //   let point = this.playData.duration / 100;
    //   if (moveVal > 0) {    
    //     this.audio.currentTime += moveValAbs * point;
    //   } else {
    //     this.audio.currentTime -= moveValAbs * point;
    //   }
    //   console.log(e.clientX);
    // },
    // dragEnd(e) {
    //   console.log(e.clientX);
    // },
    pauseAudio() {
      this.audio.pause();
      this.play = false;
      if (this.playInterval) clearInterval(this.playInterval);
    },
    transTime(time) {
      var duration = parseInt(time);
      var minute = parseInt(duration / 60);
      var sec = (duration % 60) + "";
      var isM0 = ":";
      if (minute == 0) {
        minute = "00";
      } else if (minute < 10) {
        minute = "0" + minute;
      }
      if (sec.length == 1) {
        sec = "0" + sec;
      }
      return minute + isM0 + sec;
    },
  },
  computed: {
    audioCurrentTime() {
      return this.transTime(this.playData.currentTime);
    },
    audioCurrentLength() {      
      let value = Math.round(
        (Math.floor(this.playData.currentTime) /
          Math.floor(this.playData.duration)) *
          100,
        0
      );
      if (value === "Nan") return 0;
      else return value * 1;
    },
  },
};
</script>

<style lang="less">
.audio-detail {
  padding: 20px;
  border-radius: 8px;
  background-color: #d8cdcb;
  width: 300px;

  .play-icon {
    cursor: pointer;
    color: #fff;
    margin-right: 20px;
  }

  .content {
    color: #fff;
    margin-bottom: 10px;
  }

  .progress-main {
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
    width: 100px;
    height: 1px;
    background-color: #fff;
  }

  .progress {
    color: #fff;
  }

  .progress-point {
    position: absolute;
    top: -5px;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
  }

  .progress-now {
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    background-color: #3567ff;
  }
}
</style>
